<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人员管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet"  media="all">
</head>
<body>

<table id="user-list" ></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addUser">新增用户</button>
      <button class="layui-btn layui-btn-sm" lay-event="btnExport">全部导出</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-xs" lay-event="changeRole">修改角色</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="js/layui.js"></script>
<script type="module">
    import userManager from './js/user-manager.js'
    import roleManager from './js/role-manager.js'
    
    layui.extend({optimizeSelectOption: 'plugin/optimizeSelectOption/optimizeSelectOption'})
        .use(['table', 'layer', 'form','optimizeSelectOption'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var util = layui.util;
        var roleListData = null;
        var sltUser = null;

        // 加载用户列表
        var loadUserList = function(isExport){
            userManager.getUserList($,function(rspData){
            //表格数据渲染
            var insTable = table.render({
                elem: '#user-list'
                ,title:'系统管理人员列表'
                ,toolbar:'#toolbarDemo'
                ,width: 1200
                ,height: 500
                ,size: 'lg'
                ,cols: [[{ type:"numbers", width:100, title: '序号', sort: true, fixed: 'left'}
                ,{field:'id', hide:true}
                ,{field:'userName', width:150, title: '账号'}
                ,{field:'displayName', width:200, title: '昵称'}
                ,{field:'systemRoleId', width:150, title: '所属角色', align: 'center', sort:true, templet: function(d){
                    var roleName = "";
                    $.each(roleListData,function(idx,role){
                        if(d.systemRoleId == role.id){
                            roleName = '<p>'+ role.name+'</p>';
                        }

                    });

                    return roleName;
                }, exportTemplet: function(d, obj){
                    // 处理该字段的导出数据
                    var td = obj.td(this.field); //获取当前 td
                    return td.find('p').text();
                }}
                ,{field:'remark', width:260, title: '备注'}
                ,{field:'createTime', width:160, title: '创建时间'}
                ,{fixed: 'right', title:'操作', width: 150, minWidth: 150, toolbar: '#barDemo'}
                ]]
                ,data: rspData.data
                ,even: true
                ,page: true //是否显示分页
                ,limits: [20,50,100]
                ,limit: 20 //每页默认显示的数量
                });
                if(isExport){
                    table.exportFile(insTable.config.id,rspData.data,'xls');
                }
            })
        }
        // 加载角色列表
        var loadRoleList = function(){
            roleManager.getRoleList($,function(rspData){
                roleListData = rspData.data;
                loadUserList();
            })
        }
        loadRoleList();
        // 工具栏事件
        table.on('toolbar(user-list)', function(obj){
            switch(obj.event){
                case 'addUser':
                layer.open({
                    type: 2
                    ,title:'新增用户'
                    ,content: 'user-add.html'
                    ,area: ['450px', '500px']
                    ,maxmin: false,
                });
                break;
                case 'btnExport':
                    loadUserList(true);
                break;
            };
        });

        //触发单元格工具事件
        table.on('tool(user-list)', function(obj){
            var user = obj.data;
            if(obj.event === 'del'){
                if(user.id == 1){
                    layer.msg("系统管理员不能删除",{icon:5})
                } else {
                    layer.confirm('确认删除吗', function(index){
                        obj.del();
                        userManager.deleteUser($,user,function(){
                            loadUserList();
                        })
                        layer.close(index);
                    });
                }
                
            } else if(obj.event == 'changeRole'){
                if(user.id == 1){
                    layer.msg("系统管理员不能修改",{icon:5});
                    return;
                }
                layer.open({
                    type: 2
                    ,title:'修改角色'
                    ,content: 'user-change-role.html?id=' + user.id + '&systemRoleId=' + user.systemRoleId
                    ,area: ['300px', '300px']
                    ,maxmin: false,
                });
            }
        });
        // 行选中事件
        table.on('row(user-list)', function(obj){
            sltUser = obj.data;
        });
    });
</script>
</body>

</html>